<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript" th:src="@{/js/Chart.js}"></script>
</head>
<body>

<div>
    <canvas id="popChart" width="600" height="400"></canvas>
</div>
<script th:inline="javascript" type="application/javascript">

    // var data3=[1379302771, 1281935911, 326625791, 260580739, 207353391, 204924861, 190632261, 157826578, 142257519, 126451398]
    // var lable1=["China", "India", "United States", "Indonesia", "Brazil", "Pakistan", "Nigeria", "Bangladesh", "Russia", "Japan"]

    (function (){
        var lable=[[${list1}]]
        var data1=[[${list3}]]
        var data2=[[${list4}]]
        var data3=[1379302771, 1281935911, 326625791, 260580739, 207353391, 204924861, 190632261]
        var popCanvas = document.getElementById("popChart").getContext("2d");
        var da={
            lable:lable,
            datasets:[{
                lable:'123',
                data:data3,
            }]
        }
        var data={
            labels: lable,
            datasets: [
                {
                    label: '最高温度',
                    data: data1,
                    borderColer:'red',
                    borderWidth:'3',
                    fill:false,
                    // backgroundColor: 'rgba(54, 162, 235, 0.6)'
                    // [ 'rgba(255, 99, 132, 0.6)', 'rgba(54, 162, 235, 0.6)', 'rgba(255, 206, 86, 0.6)', 'rgba(75, 192, 192, 0.6)', 'rgba(153, 102, 255, 0.6)', 'rgba(255, 159, 64, 0.6)', 'rgba(255, 99, 132, 0.6)', 'rgba(54, 162, 235, 0.6)', 'rgba(255, 206, 86, 0.6)', 'rgba(75, 192, 192, 0.6)', 'rgba(153, 102, 255, 0.6)']
                },
                {
                    label: '最低温度',
                    data: data2,
                    borderColer:'green',
                    borderWidth:'3',
                    fill:false,
                    // backgroundColor: 'rgba(255, 206, 86, 0.6)'
                }
            ]
        }
        var options= {
            scales:{
                yAxes:[{
                    ticks:{
                        // suggestMin:0,
                        // suggestMax:40,
                        min:0,
                        // max:'20',
                        // stepSize: 2,
                    }
                }]
            },
            title:{
                display:true,
                text: '最近七日温度',
                fontcolor:'green',
                fontsize:'24',
                position:'top',
            },
        };
        var barChart = new Chart(popCanvas, {
            type: 'line',
            data: data,
            options:{
                scales:{
                    yAxes:[{
                        ticks:{
                            min: 0,
                            max:20,
                        }
                    }]
                },
                title:{
                    display:true,
                    text: '最近七日温度',
                    fontcolor:'green',
                    fontsize:'24',
                    position:'top',
                },
            }
        });
    })();

</script>
</body>
</html>